//管理员登录页面
import React, { Component } from 'react'
import './adminlogin.css'
import $ from 'jquery'
import { adminLogin,ExamineCreator,FeedbackCreator,ReportCreator,FruiterCreator,UserCreator,TextCreator,ImgCreator, GoodsCreator } from '../Redux/ActionCreator';
import { connect } from 'react-redux';
import { Toast } from 'antd-mobile'
import { Login_tim } from '../IM/actiontim';

class Adminlogin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tel: '',
            password: '',
        }
        this.props.dispatch(ReportCreator())
        this.props.dispatch(FeedbackCreator())
        this.props.dispatch(ExamineCreator())
        this.props.dispatch(FeedbackCreator())
        this.props.dispatch(FruiterCreator())
        this.props.dispatch(UserCreator())
        this.props.dispatch(TextCreator())
        this.props.dispatch(ImgCreator())
        this.props.dispatch(GoodsCreator())
        this.handleChangetel = this.handleChangetel.bind(this)
        this.handleChangepassword = this.handleChangepassword.bind(this)
        Login_tim()
    }
    successToast() {
        Toast.info('登录成功', 2);
    }
    errToastone() {
        Toast.info('手机号错误或密码错误！', 2)
    }
    errToasttwo() {
        Toast.info('手机号或密码不能为空！', 2)
    }
    errToastthree() {
        Toast.info('手机号不符合规范！', 2)
    }
    errToast(msg) {
        Toast.info(`${msg}`, 2)
    }

    handleChangetel(e) {
        this.setState({ tel: e.target.value })
    }
    handleChangepassword(e) {
        this.setState({ password: e.target.value })
    }

    //获取登录时间
    currentTime = () => {
        const current_time = new Date().toLocaleString();
        console.log(current_time);
    }

    //记住密码功能
    keepPassword = () => {
        $(document).ready(function () {
            var strEmail = localStorage.getItem('keyName');
            var strPass = localStorage.getItem('keyPass');
            if (strEmail) {
                $('.admin_email').val(strEmail);
            }
            if (strPass) {
                $('.admin_password').val(strPass);
            }
        })
    }
    loginBtn_click = () => {
        const strEmail = $('.admin_email').val();
        const strPass = $('.admin_password').val();
        localStorage.setItem('keyName', strEmail);
        if ($('.keep_password').is(':checked')) {
            localStorage.setItem('keyPass', strPass);
        }
        else {
            localStorage.removeItem('keyPass');
        }
    }

     //回车登录
     componentDidMount() {
        document.body.addEventListener("keyup", (e) => {
            if (window.event) {
                e = window.event
            }
            if (e.charCode == 13 || e.keyCode == 13) {
                if (this.state.tel === '' || this.state.password === '') {
                    this.errToasttwo()
                }
                else if (!/^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/.test(this.state.tel)) {
                    this.errToastthree()
                }
                else {
                    this.props.dispatch(adminLogin(this.state.tel, this.state.password, new Date().toLocaleString(), this.props))
                }
            }
        })
    }

    componentWillMount() {
        document.body.removeEventListener('keyup', () => { })
    }

    render() {
        return (
            <div className="box" >
                <div className="box_head"><span>百果园后台管理系统</span></div>

                <div className="box_body">
                    <span className="astudy">百果园</span>
                    <input
                        className="admin_email"
                        type="tel"
                        placeholder="请输入手机号"
                        required='requied'
                        value={this.state.tel}
                        onChange={this.handleChangetel} />
                    <p></p>
                    <input
                        className="admin_password"
                        type="password"
                        placeholder="请输入密码"
                        required='requied'
                        value={this.state.password}
                        onChange={this.handleChangepassword}
                    />
                    <p></p>
                    <input className="keep_password" name="" type="checkbox"
                        onClick={() => {
                            this.loginBtn_click();
                            this.keepPassword();
                        }} />
                    <span className="if_keeppassword" >记住密码</span>

                    <button className="login_btn"
                        onClick={() => {
                            if (this.state.tel === '' || this.state.password === '') {
                                this.errToasttwo()
                            }
                            else if (!/^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/.test(this.state.tel)) {
                                this.errToastthree()
                            }
                            else {
                                this.props.dispatch(adminLogin(this.state.tel, this.state.password,new Date().toLocaleString(), this.props))
                            }
                            // currentTime();
                            // loginBtn_click();
                        }}
                    >登录</button>
                </div>
            </div >
        )
    }
}

const mapStateToProps = (state) => ({
    adminlogin: state.adminlogin,
    loginReducer: state.loginReducer,
    reportreducer:state.reportreducer,
    examinereducer: state.examinereducer,
    feedbackreducer:state.feedbackreducer,
    fruiter:state.fruiterreducer,
    textreducer:state.textreducer,
    imgreducer:state.imgreducer,
    userreducer:state.userreducer,
    goodsreducer:state.goodsreducer
})

export default (connect(mapStateToProps)(Adminlogin))
